<template>
  <el-form label-position="top" :rules="formRules" :model="form" ref="formDom" class="login-form"
    :class="{ passwordValidate: registerStep === 2 }">
    <el-form-item class="login-title"> 註冊您的smoothfinch賬戶 </el-form-item>
    <template v-if="registerStep === 1">
      <el-form-item label="郵箱號" prop="email" class="login-item email">
        <el-input type="text" v-model.trim="form.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="password" class="login-item password">
        <el-input type="password" v-model.trim="form.password" autocomplete="off" :show-password="true"></el-input>
      </el-form-item>
      <el-form-item label="確認密碼" prop="passwordConfirm" class="login-item password">
        <el-input type="password" v-model.trim="form.passwordConfirm" autocomplete="off"
          :show-password="true"></el-input>
      </el-form-item>
      <el-form-item label="郵箱騐証碼" prop="mailCode" class="login-item mail-validate-code">
        <el-input type="text" v-model.trim="form.mailCode" autocomplete="off"></el-input>
        <button class="mail-validate-btn" type="button" @click="onClickSendCode" :loading="loading">{{ cdText
          }}</button>
      </el-form-item>
      <el-form-item class="login-item login-btn">
        <el-button style="width: 100%" type="primary" @click="onClickRegister" :loading="loading">注册</el-button>
        <div class="register-tip">
          已有smoothfinch賬戶?<a @click="onClickToLogin">立即登錄</a>
        </div>
      </el-form-item>
    </template>
    <template v-if="registerStep === 2">
      <el-form-item label="谷歌驗證器" prop="googleCode" class="login-item google-validate-code">
        <el-input type="text" v-model.trim="form.googleCode" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item class="login-item login-btn">
        <el-button style="width: 100%" type="primary" @click="onClickFinishRegister">註冊完成</el-button>
      </el-form-item>
    </template>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import { useRegisterForm } from "@/hooks/login";

const { registerStep, cdText, loading, form, formRules, sendMailCode, submitForm, finishRegister } = useRegisterForm();


const formDom = ref(null);
const emit = defineEmits(["formToggle"]);

// 点击跳转登录
const onClickToLogin = () => {
  emit("formToggle", "login");
}

// 点击发送验证码
const onClickSendCode = async () => {
  await sendMailCode();
}

// 点击注册
const onClickRegister = async () => {
  submitForm(formDom);
}

// 点击完成注册
const onClickFinishRegister = () => {
  finishRegister(onClickToLogin);
}
</script>

<style lang="scss" scoped>
.login-form {
  margin-top: 80px;

  &.passwordValidate {
    margin-top: -80px;
  }

  :deep(.login-title) {
    .el-form-item__content {
      color: #3d3d3d;
      font-weight: bold;
      font-size: 36px;
      margin-bottom: 43px;
    }
  }

  :deep(.login-item) {
    .el-form-item__label {
      color: #3d3d3d;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 15px;
    }

    .el-form-item__content {
      width: 460px;

      .el-input__wrapper {
        border-radius: 8px;
        background: #ededed;

        .el-input__inner {
          height: 44px;
        }
      }
    }

    &.email {
      margin-bottom: 26px;
    }

    &.password {
      position: relative;
      margin-bottom: 48px;

      .el-form-item__content {
        .el-input__wrapper {
          padding-right: 40px;

          .el-input__suffix {
            position: absolute;
            right: 1vw;
          }
        }
      }

      .forget-password {
        position: absolute;
        right: 0px;
        font-size: 14px;
        color: #3d5dc7;
        bottom: -35px;
        cursor: pointer;
        user-select: none;
      }
    }

    &.mail-validate-code {
      margin-bottom: 40px;

      .el-input__wrapper {
        display: block;

        .el-input__inner {
          width: 72%;
        }
      }

      .mail-validate-btn {
        font-size: 18px;
        font-weight: bold;
        color: #2FC2AF;
        position: absolute;
        outline: none;
        border: none;
        cursor: pointer;
        right: 20px;

        &:hover {
          opacity: 0.8;
        }
      }
    }

    &.google-validate-code {
      margin-bottom: 69px;
      margin-top: 259px;
    }

    &.login-btn {
      .el-button {
        width: 460px;
        height: 61px;
        line-height: 61px;
        border-radius: 8px;
        background: #2fc2af;
        font-size: 24px;
        color: #fff;
        font-weight: bold;
      }

      .register-tip {
        margin-top: 28px;
        color: #b0b0b0;
        font-size: 18px;
        width: 100%;
        text-align: center;
        user-select: none;

        a {
          cursor: pointer;
          color: #3d5dc7;
        }
      }
    }
  }
}
</style>
